/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="sf-e-charts">
        <sf-e-charts
            ref="pie"
            :options="chartOptions"
            :autoDestroy="false"
            :autoRefresh="true" />
    </div>
</template>
<script>
import echartDefaultOptions from '../../../mod_common/chart_option/echart_default_option';
import {subNum} from 'src/util/subtraction';
import {isObject} from 'src/util/typeof';

const SPACE = '\xa0';
const PIE_SERIES_NUMBER_LENGTH = 3;

export default {

    /**
         *   created by zjy
         */

    data () {
        return {
            chartOptions: {},
            legendData: [
                {
                    name: _('已用'),
                    icon: 'path://M0 0 L10 10 z M2 2 L6 2 L6 6 L2 6 z'
                }, {
                    name: _('总计'),
                    icon: 'path://M0 0 L10 10 z M2 2 L6 2 L6 6 L2 6 z'
                }
            ],
            cpu: 0
        };
    },

    props: {
        hostItem: {
            type: Object
        },
        total: {
            type: [Number, Object]
        },
        used: {
            type: [String, Object, Number]
        },
        hideFlag: {
            type: Boolean
        },
        title: {
            type: String
        }
    },

    computed: {
        titleText () {
            return this.title;
        }
    },

    watch: {
        used: {
            deep: true,
            handler () {
                this._initPieChart();
            },
            immediate: true
        }
    },

    methods: {
        _initPieChart () {
            this.seriesData = [
                {
                    name: _('已用'),
                    value: isObject(this.used) ? this.used.bytesSize : this.used,
                    itemStyle: {
                        normal: {
                            color: '#1ABFBF',
                            label: {
                                show: true,
                                position: 'center',
                                formatter: function (params) {
                                    return Number(params.percent.toPrecision(PIE_SERIES_NUMBER_LENGTH)) + '%';
                                },
                                textStyle: {
                                    baseline: 'top'
                                }
                            }
                        }
                    }
                },
                {
                    name: _('总计'),
                    value: isObject(this.total) ? subNum(this.total.bytesSize, this.used.bytesSize) : subNum(this.total, this.used)
                }
            ];

            // 当totals等于0 时，表示空数据，加一项来显示默认图表
            if (!this.total) {
                this.seriesData.push({
                    name: _('无数据'),
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: '#DDDDDD'
                        }
                    }
                });
            }

            //格式化图例显示的单位
            let useText = this.used;
            let totalText = this.total;

            // let maxLength = Math.max(useText.length, totalText.length);
            this.chartOptions = echartDefaultOptions.getPieOptions({
                title: {
                    text: this.titleText,
                    top: 75,
                    left: 25,
                    subtext: '',
                    textStyle: {
                        color: '#000',
                        fontSize: 12
                    }
                },
                legend: {

                    // 根据hideFlag是true的话,影藏小图例，其他情况则正常显示
                    show: !this.hideFlag,
                    data: this.legendData,
                    selectedMode: false,
                    align: 'auto',
                    textStyle: {
                        color: '#999999',
                        fontSize: 12,
                        rich: {
                            b: {
                                color: '#000'
                            }
                        }
                    },
                    right: 0,
                    top: 13,
                    itemGap: 10,
                    borderRadius: 1,
                    formatter: (name) => {
                        let count = 0;
                        if (name === this.legendData[0].name) {
                            count = useText;
                        } else if (name === this.legendData[1].name) {
                            count = totalText;
                        }

                        // .padStart(maxLength, SPACE).replace(/\s/g, SPACE)
                        return `${name} :${SPACE}{b|${(count || '0')}}`;
                    }
                },
                series: [{
                    center: ['30%', '35%'],

                    // eslint-disable-next-line
                        radius: ['46%', '54%'],
                    silent: true,

                    // 图表数据为0的时候显示默认图表
                    // stillShowZeroSum: true,
                    label: {
                        normal: {
                            color: '#000000',
                            fontWeight: 'bolder'
                        }
                    },
                    data: this.seriesData
                }],
                color: [
                    '#DDDDDD',
                    '#1ABFBF'
                ]
            });
        }
    }
};
</script>
